<template>
  <div class="amend">
      <!-- 头部 -->
      <div class="peopled_top">
        <van-nav-bar title="体检支付页面"  left-arrow> </van-nav-bar>
      </div>
      <!-- 表单 -->
      <div class="tab">
          <div class="input">
              <span class="character">姓名：</span>
              <input type="text" class="table"  v-model="name">
        </div>
          <div class="input">
              <span class="character">手机号码：</span>
              <input type="text" class="table" v-model="name">
        </div>
          <div class="input1">
              <span class="character1">婚否：</span>
              <div class="option">
                 <input type="radio"  class="marry" name="marry" id="">已婚
                <input type="radio" class="marry" name="marry" id="">未婚 
              </div>
              
              <!-- <input type="text" class="table" v-model="name"> -->
            </div>
          <div class="input">
              <span class="character">身份证号：</span>
              <input type="text" class="table" v-model="name">
        </div>
          <div class="input">
              <span class="character">生日：</span>
              <input type="text" class="table" v-model="name">
        </div>
          <div class="input1">
              <span class="character1">性别：</span>
              <div class="option">
                <input type="radio" class="sex" name="sex" id="">男
                <input type="radio" class="sex" name="sex" id="">女
              </div>
              
              <!-- <input type="text" class="table" v-model="name"> -->
        </div> 
      </div>
    <!-- 底部 -->
        <div class="amend_bottom" >
         <div class="left"><van-button class="left-but" type="default" style="color:green">删除</van-button></div>
         <div class="right"><van-button class="right-but" type="primary">修改</van-button></div>
    </div>
  </div>
</template>

<script>
export default {
data() {
    return {
      name: '123',
      password: '',
    };
  },
  methods: {
    onSubmit(values) {
      console.log('submit', values);
    },
  },
}
</script>

<style lang="scss">
.amend{
  // 添加人头部
    .peopled_top{
        .van-icon::before {
                display: inline-block;
            }
        }  
    // 表单
    .tab{
        .input{
            height: 53px;
            display: flex;
            justify-content:space-between;
            // background-color: green;
        }
        .input1{
            
            height: 53px;
            display: flex;
            // justify-content:space-between;
            line-height: 53px;
            // background-color: green;
        }
        .character1{
            margin-left:10px ;
            display: block;
            margin-top:10px;
        }
        .character{
            margin-left:10px ;
            display: block;
            margin-top:30px;
        }
        // 单选按钮距离
        .option{
            margin-top: 10px;
             margin-left:80px ;
        }
        // 婚否按钮
        .marry{
            line-height: 50px;
        }
      .table{
          width: 65%;
          border:none;
          border-bottom: 1px solid green;
          
        //   margin-left: 70px;
        
      }  
    }
    // 底部
    .amend_bottom{
        width: 100%;
        position: fixed;
        bottom: 0;
        display: flex;
     .left{
         width: 45%;
         height: 60px;
         background-color: greenyellow;
         .left-but{
         border-top:1px solid green;
         height: 100%;
         width: 100%;
     }
     }
    //  右边按钮
    .right{
      height: 60px;
      flex: 2;
      background-color: rgb(255, 47, 151);
       .right-but{
         height: 100%;
         width: 100%;
       }
     }
    }
}

</style>